<template>
  <!-- ------------------周周抽大奖-------------- -->
  <div>
    <div v-show="changeShow" style="margin:20px;">
      <eItem :rowId='rowId' :changeShow='changeShow' :rowTemp='rowTemp' :bgTime='bgTime' :overTime='overTime' ref="mychild"/>
    </div>
    <div style="margin:20px;" v-show="!changeShow">
      <!-- 头部 -->
      <div>
        <span>活动编号:</span>
        <el-input
          v-model="form.name"
          size="small"
          placeholder="请输入活动期数"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="search"
        />
        <span style="margin-left:3%">活动状态:</span>
        <el-select
          size="small"
          placeholder="请选择状态"
          clearable
          class="filter-item"
          style="width: 250px;margin-left:2%"
          v-model="form.status"
        >
          <el-option v-for="item in qudaoTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
        </el-select>
        <el-button
          size="small"
          style="margin-left:20px;"
          type="success"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
        <el-button
          size="small"
          class="filter-item"
          style="margin-right: 10px;float:right"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >
          添加活动
        </el-button>
      </div>

      <!-- 表格 -->
      <el-table
        :data="jobOffersRecordData"
        style="width: 100%;margin-top:20px;"
        border
        v-loading="loading"
        :default-sort="{prop: 'createTime', order: 'descending'}"
      >
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="活动期数" align="center"></el-table-column>
        <el-table-column :formatter='formatter' prop="startTime" label="开始时间" align="center"></el-table-column>
        <el-table-column :formatter='formatterEnd' prop="endTime" label="结束时间" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.status==='0'?'未开启':scope.row.status==='1'?'进行中':'已结束' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="record" label="备注说明" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="setUp(scope.row)" style="color:blue;" type="text">设置奖品</el-button>
            <el-button @click="findDetail(scope.row)" style="color:blue;" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.start"
        :limit.sync="listQuery.length"
        @pagination="search"
      />

      <!-- 详情页对话框 -->
      <el-dialog title="查看活动详情" append-to-body :visible.sync="showDetailDialog" width="70%">
        <div>
          <span>商品编号:</span>
          <el-input
            v-model="infoForm.proInfoId"
            size="small"
            placeholder="请输入商品编号"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="queryDetail"
          />
          <span>商品名称:</span>
          <el-input
            v-model="infoForm.proInfoName"
            size="small"
            placeholder="请输入商品名称"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="queryDetail"
          />
          <el-button
            size="small"
            style="margin-left:20px;"
            type="success"
            icon="el-icon-search"
            @click="queryDetail"
          >查询</el-button>
        </div>
        <el-table
          :data="detailsData"
          style="width: 100%;margin-top:20px;"
          border
          v-loading="loading"
        >
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="proInfoId" label="商品编码" align="center"></el-table-column>
          <el-table-column prop="proInfoName" label="商品名称" align="center"></el-table-column>
          <el-table-column :formatter='formatterShowTime' prop="rowTime" label="开奖时间" align="center"></el-table-column>
          <el-table-column prop="proMarketPrice" label="市场价格（元）" align="center"></el-table-column>
          <el-table-column label="抵扣小康币（个）" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.xkCoin }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="proInfoNum" label="商品数量" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="cashPrize(scope.row)" style="color:blue;" type="text">查看兑奖名单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="detailsTotal > 0"
          :total="detailsTotal"
          :page.sync="detailsQuery.start"
          :limit.sync="detailsQuery.length"
          @pagination="queryDetail"
        />
      </el-dialog>
      <!-- 查看兑奖名单 -->
      <el-dialog title="查看兑奖名单" append-to-body :visible.sync="cashPrizeDialog" width="70%">
        <div>
          <span>兑奖人姓名:</span>
          <el-input
            v-model="peopleForm.nickName"
            size="small"
            placeholder="请输入兑奖人姓名"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="cashPrize"
          />
          <span>兑奖人手机号:</span>
          <el-input
            v-model="peopleForm.userName"
            size="small"
            placeholder="请输入兑奖人手机号"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="cashPrize"
          />
          <span style="margin-left:3%">兑奖状态:</span>
          <el-select
            size="small"
            placeholder="请选择兑奖状态"
            clearable
            class="filter-item"
            style="width: 250px;margin-left:2%"
            v-model="peopleForm.isReceive"
          >
            <el-option v-for="item in lingquTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
          </el-select>
          <el-button
            size="small"
            style="margin-left:20px;"
            type="success"
            icon="el-icon-search"
            @click="cashPrize"
          >查询</el-button>
        </div>
        <el-table
          :data="prizeData"
          style="width: 100%;margin-top:20px;"
          border
          v-loading="loading"
        >
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="awardCode" label="APP账号" align="center"></el-table-column>
          <el-table-column prop="userName" label="兑奖人姓名" align="center"></el-table-column>
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.gender==='0'?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="领取状态" align="center">
            <template slot-scope="scope">
              <el-select
                size="small"
                clearable
                class="filter-item"
                v-model="scope.row.isReceive"
                @change='updateStatus(scope.row)'
              >
                <el-option v-for="item in lingquTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button type="danger" plain size="small" @click="changeStatus(row)">{{ row.status==='0'?"设置为内定":"取消内定" }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="prizeTotal > 0"
          :total="prizeTotal"
          :page.sync="prizeQuery.start"
          :limit.sync="prizeQuery.length"
          @pagination="cashPrize"
        />
      </el-dialog>
      <el-dialog
      @close="loadPage"
      v-loading='loading'
      :close-on-click-modal="false"
      title="新增"
      :visible.sync="dialogFormVisible"
      append-to-body
      width="60%"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="150px"
        style="width: 600px; margin-left:150px;"
      >
        <el-form-item label="活动编号:">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="开始日期时间:" prop="beginTime">
          <el-date-picker
            v-model="temp.startTime"
            type="datetime"
            placeholder="选择开始日期时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期时间:" prop="endTime">
          <el-date-picker
            v-model="temp.endTime"
            type="datetime"
            placeholder="选择结束日期时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="备注说明：" prop="descr">
          <el-input type="textarea" v-model="temp.record" />
        </el-form-item>
        <el-form-item label="活动状态：" prop="status">
            <el-radio v-model="temp.status" label="0">未开始</el-radio>
            <el-radio v-model="temp.status" label="1">进行中</el-radio>
            <el-radio v-model="temp.status" label="2">已结束</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          返回
        </el-button>
        <el-button
          type="primary"
          :disabled="disabled"
          @click="createData()"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getList,getListDetails,getListPrize,change,createData,changeReceiveState
} from "@/api/luckDraw/index";
import { parseTime, formatDate } from "@/utils/index";
import eItem from './item'
const qudaoTypeOptions = [
  { key: '0', display_name: '未开始' },
  { key: '1', display_name: '进行中' },
  { key: '2', display_name: '已结束' },
]
const lingquTypeOptions = [
  { key: '0', display_name: '未领取' },
  { key: '1', display_name: '已领取' },
  { key: '2', display_name: '已放弃' },
]
const calendarqudaoKeyValue = qudaoTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
const calendarlingquKeyValue = lingquTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
export default {
  components: { eItem ,Pagination },
  filters: {
    formatDate(time) {
      if (time == undefined) {
        return "";
      }
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd");
    },
    qudaoFilter(type) {
      return calendarqudaoKeyValue[type]
    },
    lingquFilter(type) {
      return calendarlingquKeyValue[type]
    }
  },
  
  data() {
    return {
      qudaoTypeOptions,
      lingquTypeOptions,
      changeShow:false,
      loading: false,
      // 正在编辑的列表
      editStartIds: [],
      editEndIds: [],
      disabled:false,
      // 编辑关联的值
      editStartValues: [],
      editEndValues: [],
      // 对话框
      showDetailDialog: false,
      cashPrizeDialog:false,
      dialogFormVisible:false,
      //简历列表
      jobOffersRecordData: [],
      detailsData:[],
      prizeData:[],
      // 简历单项
      jobOffersItem: {},
      //企业列表
      companyList: [],
      options: [],
      rowId : '',
      rowTime:'',
      rowObject:{},
      // 提交数据体
      form: {
        // 活动期数
        name: "",
        // 活动状态
        status: "",
      },
      infoForm:{
        proInfoId:'',
        proInfoName:''
      },
      peopleForm:{
        userName:'',
        nickName:'',
        isReceive:''
      },
      // 分页
      total: 0,
      detailsTotal:0,
      prizeTotal:0,
      detailsQuery:{
        start: 1,
        length: 10,
      },
      prizeQuery:{
        start: 1,
        length: 10,
      },
      temp:{
        activityRules:"",
        description:''
      },
      listQuery: {
        start: 1,
        length: 10,
        companyId: "",
        companyName: "",
        status: ""
      },
      userId:'',
      rowTemp:{},
      bgTime:'',
      overTime:''
    };
  },
  created() {
    this.search(); 
  },
  methods: {
    parseTime,
    // 查看详情
    // 查询
    setUp(row){
      this.rowTemp=row
      this.rowId=row.id
      this.bgTime=parseTime(row.startTime)
      this.overTime=parseTime(row.endTime)
      this.changeShow = true;
      this.$refs.mychild.getItemList(this.rowTemp)
      // this.$router.push({path:'/operate/activityPperation/luckDraw'})
    },
    //修改中奖状态
    updateStatus(row){
      var params={
        id:row.id,
        status:row.isReceive
      }
      changeReceiveState(params).then(res=>{
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success',
            duration: 2000
          })
          this.cashPrize()
        }
      })
    },
    changeStatus(row) {
      this.userId = row.id
      var params = {
        id: this.userId,
      }
      change(params).then(res => {
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
          this.cashPrize()
        }else{
          this.$notify({
            title: '失败',
            message: '修改失败',
            type: 'danger',
            duration: 2000
          })
          this.cashPrize()
        }
      })
      
    },
    search() {
      this.loading = true;
      var params = {
        pageNum: this.listQuery.start - 1,
        pageSize: this.listQuery.length,
        name: this.form.name,
        status: this.form.status,
      };
      getList(params).then(res => {
        console.log(res);
        this.total = res.data.totalElements;
        this.jobOffersRecordData = res.data.content;

        this.editStartValues = [];
        this.editEndValues = [];
        this.jobOffersRecordData.forEach(item => {
          this.editStartValues.push("");
          this.editEndValues.push("");
        });
        this.loading = false;
      });
    },
    findDetail(row){
      this.rowId=row.id
      this.rowTime=row.endTime
      console.log(row.id)
      this.showDetailDialog = true;
      var params={
        id:this.rowId,
        pageNum: this.detailsQuery.start - 1,
        pageSize: this.detailsQuery.length,
        proInfoId:this.infoForm.proInfoId,
        proInfoName:this.infoForm.proInfoName
      }
      getListDetails(params).then(res=>{
        this.detailsTotal = res.data.totalElements;
        this.detailsData = res.data.content;
      })
    },
    queryDetail(){
      this.detailsQuery.start=1
      this.findDetail(this.rowObject)
    },
    //查看中奖名单
    cashPrize(){
      this.showDetailDialog = false;
      this.cashPrizeDialog = true;
      var params={
        pageNum: this.prizeQuery.start - 1,
        pageSize: this.prizeQuery.length,
        userName: this.peopleForm.userName,
        nickName: this.peopleForm.nickName,
        isReceive: this.peopleForm.isReceive
      }
      getListPrize(params).then(res=>{
        this.prizeTotal = res.data.totalElements;
        this.prizeData = res.data.content;
      })
    },
    //时间格式化
    formatter(row, column) {
      return parseTime(row.startTime);
    },
    formatterEnd(row, column) {
      return parseTime(row.endTime);
    },
    formatterShowTime(column) {
      return parseTime(this.rowTime);
    },
    // 监听选项变化
    selectChange(row) {
      var params = {
        id: row.id,
        status: row.status
      };
      editJobOffersRecord(params).then(res => {
        this.search();
      });
    },
    //添加活动
    resetTemp() {
      this.temp = {
      }
    },
    loadPage(){
      this.temp = {
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogFormVisible = true
      this.disabled=false
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData(){
      this.disabled=true
      this.temp.startTime=new Date(this.temp.startTime).getTime()
      this.temp.endTime=new Date(this.temp.endTime).getTime()
      this.temp.activityRules=''
      this.temp.description=''
      createData(this.temp).then(() => {
        this.jobOffersRecordData.unshift(this.temp)
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        this.search()
      })
    }
  }
};
</script>

<style>
</style>